import * as echarts from 'echarts'

import { reactive } from 'vue'

const state = reactive({
  pieChartDom: '',
  pieMyChart: '',
  pieOption: {},

  radarChartDom: '',
  radarMyChart: '',
  radarOption: {}
})

/**
 * 饼图开始
 */
// 饼图初始化
const pieChart = () => {
  state.pieChartDom = document.querySelector('#pie-chart')
  state.pieMyChart = echarts.init(state.pieChartDom)

  state.pieOption = {
    backgroundColor: '#2c343c', // 背景颜色
    /**
     * 标题：
     * 名称、位置、距离、文字样式
     */
    title: {
      text: '饼图',
      left: 'center',
      top: 20,
      textStyle: { color: '#ccc' }
    },
    tooltip: { // 文体提示类型
      trigger: 'item'
    },
    visualMap: {
      show: false,
      min: 80,
      max: 600,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [
      {
        name: '前端技术',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: 'React' },
          { value: 274, name: 'CSS' },
          { value: 310, name: 'HTML' },
          { value: 335, name: 'javaScript' },
          { value: 400, name: 'Vue' }
        ],
        roseType: 'radius',
        label: {
          normal: {
            textStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          }
        },
        labelLine: {
          normal: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            }
          }
        },
        itemStyle: {
          normal: {
            color: '#c23531',
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  state.pieOption && state.pieMyChart.setOption(state.pieOption)
}
// 饼图销毁
const destroyPieChart = () => {
  echarts.dispose(state.pieMyChart)
}
/**
 * 饼图结束
 */

/**
 * 雷达图开始
 */
// 雷达图初始化
const radarChart = () => {
  state.radarChartDom = document.querySelector('#radar-chart')
  state.radarMyChart = echarts.init(state.radarChartDom)
  state.radarOption = {
    backgroundColor: '#fff', // 背景颜色
    /**
     * 标题：
     * 名称、位置、距离、文字样式
     */
    title: {
      text: '基础雷达图',
      left: 'let'
    },
    legend: {
      top: 0,
      data: ['预算分配', '实际开销']
    },
    radar: {
      center: ['50%', '55%'], // 可视区的位置
      radius: '50%', // 可视区的尺寸
      indicator: [
        { name: '销售', max: 6500 },
        { name: '管理', max: 16000 },
        { name: '信息技术', max: 30000 },
        { name: '客服', max: 38000 },
        { name: '研发', max: 52000 },
        { name: '市场', max: 25000 }
      ]
    },
    series: [{
      name: '预算 vs 开销',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '预算分配'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '实际开销'
        }
      ]
    }],
    tooltip: { // 文体提示类型
      trigger: 'item'
    }
  }
  state.radarOption && state.radarMyChart.setOption(state.radarOption)
}
// 雷达图销毁
const destroyRadarChart = () => {
  echarts.dispose(state.radarMyChart)
}
/**
 * 雷达图结束
 */

export { pieChart, destroyPieChart, radarChart, destroyRadarChart }
